<template>
	<div>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品列表</block>
		</cu-custom>
		<view class="fixed">
			<view class="cu-bar search  goods-search bg-blue">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入搜索的商品" confirm-type="search" v-model="queryParams.name"></input>
				</view>
				<view class="action">
					<button class="cu-btn shadow-blur round text-blue" @tap="initPage">搜索</button>
				</view>
			</view>
		</view>

		<view style="top: unset !important;
		margin-top: 100rpx;">

			<view v-for="(item,index) in list" :key="index" class="solid-bottom bg-white">
				<view class="flex justify-between align-center padding-top padding-right-sm">
					<view class="cu-bar" style="min-height: 50rpx;">
						<view class="action">
							<text class="cuIcon-title text-blue"></text>
						</view>
						<view class="action">
							<view>{{item.createTime}}</view>
						</view>
					</view>
					<view class='cu-tag radius line-blue'>{{item.status =='1' ? '已上架' :'已下架'}}</view>

				</view>
				<view class="flex p-xs mb-sm">
					<view class="flex-sub padding-lr-sm padding-top-sm"> <img :src="item.spuUrls[0]" alt=""
							style="height:100px;width:100px;">
					</view>
					<view class="flex-twice padding-top-sm padding-lr-xs">
						<view class="hx-overflow-2">{{item.name}}</view>
						<view class="text-grey padding-top-xs ">
							销量：{{item.salesVolume}}
						</view>
						<view class="text-red text-price text-xl padding-top-xs">
							{{item.lowPrice == item.highPrice ? item.lowPrice : item.lowPrice+'-'+item.highPrice}}
						</view>
						<view class="cu-bar btn-group">
							<button class="cu-btn round  submit margin-right-xs"
								:class="item.status == '1' ?'bg-red' :'bg-blue'"
								@tap="updateStatus(item,index)">{{item.status =='1' ? '下架' :'上架'}}</button>
							<button class="cu-btn round bg-blue submit margin-left-xs"
								@tap="onDetail(item.id)">详情</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-load bg-gray" :class="isLoad?'loading':'over'">
		</view>
	</div>
</template>

<script>
	import {
		getPage,
		updateStatus
	} from '@/api/mall/goodsspu.js'
	export default {
		data() {
			return {
				queryParams: {},
				page: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					descs: 'create_time',
				},
				list: [],
				isLoad: true
			}
		},
		onShow() {
			this.refreshPage()
		},
		onReachBottom() {
			if (this.isLoad) {
				this.page.currentPage = this.page.currentPage + 1;
				this.initPage();
			}
		},
		onPullDownRefresh() {
			// 在当前页面显示导航条加载动画。
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#ff0000',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.refreshPage();
			uni.hideNavigationBarLoading(); // 在当前页面隐藏导航条加载动画。
			uni.stopPullDownRefresh();
		},

		methods: {
			initPage() {
				let params = {
					current: this.page.currentPage,
					size: this.page.pageSize,
					descs: this.page.descs,
				}
				getPage(Object.assign(params, this.queryParams)).then(res => {
					let goodsSpuList = res.data.records;
					this.list = [...this.list, ...goodsSpuList];
					if (goodsSpuList.length < this.page.pageSize) {
						this.isLoad = false;
					}
				})
			},
			refreshPage() {
				this.isLoad = true;
				this.list = [];
				this.page.currentPage = 1;
				this.initPage();
			},
			onDetail(id) {
				uni.navigateTo({
					url: "/pages/mall/goodsspu/goods-detail/index?id=" + id
				})
			},
			updateStatus(item, index) {
				let _this = this;
				uni.showModal({
					content: item.status == '1' ? '确定下架商品吗' : '确定上架商品吗',
					cancelText: '我再想想',
					success(res) {
						if (res.confirm) {
							updateStatus({
								id: item.id,
								status: item.status == '1' ? '0' : '1'
							}).then(res => {
								_this.list[index].status = res.data.status
							})
						}
					}
				});

			}
		}
	}
</script>

<style>

</style>
